<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<style></style>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">
                <img src="Logo 设计.png" alt="Logo">
            </div>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <ul class="nav-links">
                <li><a href="#profile">个人简介</a></li>
                <li><a href="#education">教育背景</a></li>
                <li><a href="#skills">技能专长</a></li>
                <li><a href="#projects">项目经验</a></li>
                <li><a href="#awards">获奖情况</a></li>
                <li><a href="#self-evaluation">自我评价</a></li>
            </ul>
        </div>
    </nav>

    <header id="profile">
        <div class="profile">
            <img src="profile.jpg" alt="个人照片" class="profile-img">
            <h1>程范校</h1>
            <p>求职意向：前端开发工程师</p>
        </div>
        <div class="contact-info">
            <p><i class="fas fa-phone"></i> 182-8995-9668</p>
            <p><i class="fas fa-envelope"></i> 3106780282@qq.com</p>
            <p><i class="fab fa-github"></i> <a href="https://gitee.com/chengfanxiao/my-profile" target="_blank">github.com/chengfanxiao</a></p>
        </div>
    </header>

    <section id="education" class="section">
        <h2><i class="fas fa-graduation-cap"></i> 教育背景</h2>
        <div class="content">
            <p><strong>海南经贸职业技术学院</strong> - 软件技术专业</p>
            <p>在校时间：2023.09 - 2026.06</p>
            <p>核心课程：
            <li>编程语言：Java（面向对象/集合/IO/多线程）、Python（数据分析基础）</li>

                <li>数据库：MySQL（增删改查/事务/索引优化）、Redis（缓存设计）</li>
                
                <li>前端开发：HTML5/CSS3、JavaScript（DOM/BOM操作）、Vue.js框架（入门实践）</li>
                
                <li>后端开发：JavaWeb（Servlet/JSP）、Spring Boot（搭建简易REST API）</li>
                
                <li>其他：数据结构与算法、Linux基础命令、软件工程（UML/敏捷开发流程</li>
            </p>
        </div>
    </section>

    <section id="skills" class="section">
        <h2><i class="fas fa-code"></i> 技能专长</h2>
        <div class="content">
            <ul>
                <p>编程语言:</p>
                <li>熟练掌握 Java：熟悉多线程编程、集合框架、IO/NIO 等核心特性，能开发控制台/桌面应用（如 Swing 项目）</li>

                <li>熟练使用 Python：掌握 Pandas/NumPy 基础数据分析，能编写自动化脚本（如文件批量处理）</li>
            </p>
            <p>开发框架:
                <li>熟悉 Spring Boot：能独立搭建 RESTful API，集成 MyBatis 实现 CRUD 操作，了解 Spring Security 基础权限控制</li>
            </p>
                <p>前端技术：
                <li>熟练使用 HTML5/CSS3：能实现 Flex/Grid 响应式布局，适配移动端与 PC 端</li>

                <li>掌握 JavaScript：熟悉 ES6+ 特性（箭头函数/Promise/解构赋值），能配合 AJAX 实现前后端数据交互</li>
            </p>
            <p>数据库与工具:
                <li>熟悉 MySQL：掌握事务隔离级别、索引优化原则，能编写存储过程与触发器</li>

                <li>熟练使用 Git：熟悉分支管理策略（如 Git Flow），曾协作开发课程项目（提交 50+ Commit）</li>
                    
                <li>熟悉 Linux：掌握常用命令（grep/sed/awk），能配置 Nginx 静态资源服务器</li>
            </p>
            </ul>
        </div>
    </section>

    <section id="projects" class="section">
        <h2><i class="fas fa-project-diagram"></i> 项目经验</h2>
        <div class="content">
            <h3>自主研发网站</h3>
            <p><strong>项目时间:</strong> 2024.03 - 2025.03</p>
            <p><strong>项目描述:</strong> 自主开发前端网页，研究有趣页面</p>
            <p><strong>个人职责:</strong> 负责代码开发，上传Git</p>
            <p><strong>技术栈:</strong>Spring Boot, MySQL, HTML, CSS, JavaScript</p>
        </div>
        <div class="content">
            <h3>个人博客网站</h3>
            <p><strong>项目时间:</strong> 2024.09 - 2025.3</p>
            <p><strong>项目描述:</strong> 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
            <p><strong>个人职责:</strong> 负责前后端开发，部署到Linux服务器。</p>
            <p><strong>技术栈:</strong> Python, Django, SQLite, HTML, CSS, JavaScript</p>
        </div>
    </section>

    <section id="awards" class="section">
        <h2><i class="fas fa-trophy"></i> 获奖情况</h2>
        <div class="content">
            <ul>
                <li>2023年优秀志愿者</li>
            </ul>
        </div>
    </section>

    <section id="self-evaluation" class="section">
        <h2><i class="fas fa-user"></i> 自我评价</h2>
        <div class="content">
            <p>热爱编程，熟悉python开发全流程，善于通过官方文档快速掌握新技术

                具备扎实的代码能力，能独立完成模块开发
                
                对技术有持续热情,持通过技术博客等方式提升算法与工程化思维
                
                良好的团队协作能力，合理分配任务并保障项目按时交付</p>
        </div>
    </section>

    <footer>
        <p>© 2025 程范校. 版权所有.</p>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="back-to-top" title="返回顶部">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- 打印按钮 -->
    <button id="printBtn" class="print-btn" title="打印简历">
        <i class="fas fa-print"></i>
    </button>

    <script>
        // 菜单切换
        document.querySelector('.menu-toggle').addEventListener('click', function() {
            document.querySelector('.nav-links').classList.toggle('active');
        });

        // 返回顶部按钮
        const backToTopBtn = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 打印功能
        const printBtn = document.getElementById('printBtn');
        printBtn.addEventListener('click', () => {
            window.print();
        });
    </script>
</body>
</html>